<template>
    <div class="flex flex-row h-full">
        <div class="flex flex-col border-r">
            <div class="w-10 h-10 flex flex-row justify-center items-center  "
                :class="{ 'border-blue-700 bg-blue-100 border-l-2 ': selected == 0 }" @click="selected = 0">
                <n-icon size="18" :component="CompassOutline" />
            </div>
            <!-- 大纲 -->
            <div class="w-10 h-10 flex flex-row justify-center items-center"
                :class="{ 'border-blue-700 bg-blue-100 border-l-2 ': selected == 1 }" @click="selected = 1">
                <n-icon size="18" :component="GitNetworkOutline" />
            </div>
            <!-- 代码 -->
            <!-- <div class="w-10 h-10 flex flex-row justify-center items-center"
                :class="{ 'border-blue-700 bg-blue-100 border-l-2 ': selected == 2 }" @click="selected = 2">
                <n-icon size="18" :component="CodeDownloadOutline" />
            </div> -->
        </div>

        <div v-if="selected == 0" class="p-2 flex flex-col w-full">
            <div class="border-b border-gray-200 flex flex-col pb-4 mb-1">
                <span class="text-xs font-medium mb-2">组件</span>
                <n-input class="w-full" v-model:value="search" placeholder="搜索组件" size="small" />
            </div>

            <div class="mt-2">
                    <Item v-for="item in Items" :options="item"></Item>
            </div>
        </div>

        <div v-if="selected == 1" class="p-2 flex flex-col w-full text-xs">
            <n-tree block-line :data="tree" key-field="id" label-field="label" children-field="body"
                :render-switcher-icon="renderSwitcherIcon" :node-props="nodeProps" :default-expand-all="true"
                :default-selected-keys="[currentFormJson.id]" :watch-props="['defaultSelectedKeys']" selectable />
        </div>

        <!-- <div v-if="selected == 2" class="p-2 flex flex-col w-full">
            <n-code :code="JSON.stringify(tree)" :show-line-numbers="true" language="json"></n-code>
        </div> -->
    </div>
</template>

<script setup>
import { ref, h, watchEffect } from 'vue'
import { NIcon, NInput, NTree, NCode } from 'naive-ui';
import { CompassOutline, GitNetworkOutline, CodeDownloadOutline, ChevronForward } from '@vicons/ionicons5'
import Item from './Item.vue';
import Items from '../items/index.js';
import { useFormJsonStore } from '../stores/form-json.js'

const formJsonStore = useFormJsonStore()
const formJson = formJsonStore.getFormJson()

const renderSwitcherIcon = () => h(NIcon, null, { default: () => h(ChevronForward) })
const nodeProps = ({ option }) => {
    return {
        onClick() {
            console.log(option.id)
            formJsonStore.setCurrentFormJson(option.id)
        },
    };
}
const currentFormJson = formJsonStore.getCurrentFormJson()
const search = ref('')
const selected = ref(0)
const tree = formJson
</script>